<template>
    <header class="admin-header">
        <div class="header-wrap">
            <nav class="top-menu">
                <ul class="main-menu">
                    <li v-for="(menu, idx) in menuList" :key="idx" @click="subMenuShow(menu)"
                        :class="{ 'main-active': checkMenu == menu.menuId }">
                        {{ menu.menuNm }}
                    </li>
                </ul>
            </nav>
        </div>
    </header>
</template>

<script>
import queryParams from '../../resources/js/queryParams';
import { defaultSearchParams } from '../../resources/js/defaultSearchParams';
import { findBySysMenu } from '../../resources/api/menu';

export default {
    mixins: [queryParams],
    components: {

    },
    data() {
        return {
            checkMenu: null,
            resetSearch: { ...defaultSearchParams },
            menuList: [],
        }
    },
    created() {
        this.findAll();
        this.menuCheck();
    },
    methods: {
        menuCheck() {
            const menu = this.$store.state.menu;
            if(menu != null && menu != '' && menu != undefined) {
                this.checkMenu = menu.menuId;
            }
        },
        // 목록 조회
        async findAll() {
            try {
                const params = {
                    roles : this.$store.state.roles.map(auth => auth.authority),
                    menuType : this.$store.state.userType
                };
                const res = await findBySysMenu(params);
                if(res.status == 200) {
                    this.menuList = res.data.data.menuList;
                     // 전체 메뉴 트리 store에 저장
                    this.$store.commit('setMenuList', this.menuList);
                }
            } catch(error) {
                alert('에러가 발생했습니다.\n관리자에게 문의하세요.');
            }
        },
        async subMenuShow(menu) {
            this.saveQueryParams('queryParams', this.resetSearch); // 검색조건 초기화
            this.$store.commit('setMenu', menu);
        },

    },
    watch: {
        '$store.state.menu': function (newValue, oldValue) {
            if(newValue == null || newValue == '' || newValue == undefined) {
                this.checkMenu = null;
            } else {
                this.checkMenu = newValue.menuId;
            }
        },

    },
    computed: {

    },
    mounted() {

    }
}
</script>